<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>私教签到</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="css/homePage.css">
	<link rel="stylesheet" href="css/reset.css">
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/fontsize.js"></script>
	<style>
		.content{
			padding: 0.1rem;
		}
		.list_signIn{
			padding: 0.1rem;
			margin-bottom: 0.1rem;
			box-sizing: border-box;
			box-shadow: 0px 8px 28px 0px rgba(58,76,130,0.07), 0px 5px 10px 0px rgba(34,47,85,0.05);
			border-radius: 2px;
		}
		.lf{
			float: left;
		}
		.rf{
			float: right;
		}
		.course_Name{
			font-size: 0.15rem;
			margin-right: 0.1rem;
		}
		._Name{
			color:#0E9CFA;
			font-size: 0.12rem;
			margin-right: 0.1rem;
		}
		.check{
			text-align: center;
			color:#fff;
			background:rgba(14,156,250,1);
            border-radius:2px;
			padding: 0.05rem 0rem;
			margin-top: 0.2rem;
			width: 0.64rem;
		}
		.signIn_time{
			height: 0.25rem;
			line-height: 0.25rem;
		}
		.signIn_time span:nth-child(1){
			margin-right: 0.1rem;
		}
		.signIn{
			height: 0.25rem;
			line-height: 0.25rem;
		}
		.marginright5{
			margin-right: 0.05rem;
			font-size: 0.14rem;
		}
		.more_content{
			margin-top: 0.1rem;
			display: none;
		}
		.more_content>div{
			padding-top: 0.1rem;
		}
		.border_dashed{
			width: 80%;
			border-top:2px dashed #f3f3f3;
		}
		.check_in{
			text-align: center;
			height:20px;
			font-size:14px;
			font-family:PingFangSC-Regular;
			font-weight:400;
			color:rgba(153,153,153,1);
			line-height:20px;
			margin-top: 0.2rem;
			/* background:rgba(199,199,199,0.11); */
			border-radius:2px;
			width: 0.64rem;
		}
		.cancel_check{
			text-align: center;
			color:#fff;
			background:rgba(14,156,250,1);
            border-radius:2px;
			padding: 0.05rem 0rem;
			margin-top: 0.05rem;
			width: 0.64rem;
		}
		.vcenter{
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<section class="content">
		<div class="list_signIn">
			<div class="clearfix">
				<div class="lf" style="	border: 1px dashed #f3f3f3;margin-right:0.1rem;">
					<img src="images/xiaoxiao_man.png" style="width:0.66rem;height:0.66rem;">
				</div>
				<div class="lf">
					<div><span class="course_Name">动感单车燃脂加强课</span><span class="_Name" style="margin-right:0;">王豆豆</span></div>
					<div class="signIn_time"><span>12:00-14:00</span><span>A1</span></div>
					<div class="signIn"><span class="marginright5">预约 <span>5/10</span></span><span class="marginright5">签到3</span><span>未签到3</span></div>
				</div>
				<div class="rf check" onclick="check(this)" value="2">
					查 看
				</div>
			</div>
			<div class="clearfix more_content">
				<div class="lf">
					<img src="images/xiaoxiao_man.png" style="width:0.66rem;height:0.66rem;">
				</div>
				<div class="border_dashed lf">
					<div class="lf">
						<div><span class="course_Name">王豆豆</span><span class="_Name vcenter" ><img src="images/man.png"></span><span class="_Name">15735926666</span></div>
						<div class="signIn_time"><span>黄金会员卡</span><span>剩余112次</span></div>
						<div class="signIn"><span class="marginright5">预约时间：</span><span class="marginright5">2019-03-04</span></div>
					</div>
					<div class="rf  check_in">
						已签到
					</div>
				</div>
			</div>
			<div class="clearfix more_content">
				<div class="lf">
					<img src="images/xiaoxiao_man.png" style="width:0.66rem;height:0.66rem;">
				</div>
				<div class="border_dashed lf">
					<div class="lf">
						<div><span class="course_Name">王豆豆</span><span class="_Name vcenter" ><img src="images/women.png"></span><span class="_Name">15735926666</span></div>
						<div class="signIn_time"><span>黄金会员卡</span><span>剩余112次</span></div>
						<div class="signIn"><span class="marginright5">预约时间：</span><span class="marginright5">2019-03-04</span></div>
					</div>
					<div class="rf">
						<p class="check" style="margin-top:0.1rem;">签到</p>
						<p class="cancel_check">取消预约</p>
					</div>
				</div>
			</div>
		</div>
		<div class="list_signIn">
			<div class="clearfix">
				<div class="lf" style="	border: 1px dashed #f3f3f3;margin-right:0.1rem;">
						<img src="images/xiaoxiao_man.png" style="width:0.66rem;height:0.66rem;">
				</div>
				<div class="lf">
					<div><span class="course_Name">动感单车燃脂加强课</span><span class="_Name">王豆豆</span></div>
					<div class="signIn_time"><span>12:00-14:00</span><span>A1</span></div>
					<div class="signIn"><span class="marginright5">预约 <span>5/10</span></span><span class="marginright5">签到3</span><span>未签到3</span></div>
				</div>
				<div class="rf check" onclick="check(this)" value="1">
					查 看
				</div>
			</div>
		</div>
	</section>
</body>
<script>
	function check(obj){
		var thisObj=$(obj);	
		if(thisObj.parent().siblings().length>0){
			if(thisObj.attr("value")==1){
			thisObj.parent().siblings().fadeOut();
			thisObj.attr("value","2");
			thisObj.html("查看");
			thisObj.removeClass("check_in").addClass("check");
		}else{
			thisObj.parent().siblings().fadeIn();
			thisObj.attr("value","1");
			thisObj.html("收起");
			thisObj.removeClass("check").addClass("check_in");
		
		}
	}
	}
</script>
</html>